<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<meta name="format-detection" content="telephone=no" /> 
<link rel="shortcut icon" href="images/logo.ico" />
<title>闪度生活</title>
<meta name="keywords" content=" " />
<meta name="description" content=" " />


<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/swiper-3.4.1.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/easing.js"></script>
<script src="js/swiper-3.4.1.min.js"></script>
<script src="js/index.js"></script>
<script src="js/main.js"></script>

<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/axios-config.js"></script>
<script src="./js/js.cookie.js"></script>
<script src="./js/utils.js"></script>

<style>
  .pinglun1_show{
    display: block;
  }
</style>

</head>

<body>

<div id="app" v-cloak>

<!--  / warpper  -->
<div class="warpper warpper_str">
    <div class="stroy_inn_box1">
      <div class="stroyinn_box">
        <!-- <img src="images/stroy_pu1.jpg" width="100%"> -->
        <div class="swiper-container swiper-storyDetail">
          <div class="swiper-wrapper">            
              <div class="swiper-slide" v-for="(items1,index) in stroy_details.pic_list">                
                <img :src="items1" width="100%">              
              </div>                           
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination swiper-pagination-storyDetail"></div>
        </div>
        <a class="back" href="javascript:history.go(-1)"><img src="images/hl.png" width="100%"></a>
      </div>
      <div class="stroy_function clearfix">
        <span class="left">支持数：{{stroy_details.is_popularity}}</span>
        <span class="right">编号：{{stroy_details.number}}</span>
      </div>
    </div>
    <div class="stroy_inn_text">
      <h5>{{stroy_details.title}}<span>发布人：{{stroy_details.person_name}}<i>{{stroy_details.city}}</i></span></h5>
      <div class="content">
        {{stroy_details.content}}
      </div>
    </div>
</div>
<!--  / warpper  -->
  

<!--  / footer  -->
  <div class="stroy_footer">
      <div class="stroy_fbox stroy_fbox_zhichi" @click="zhichi">
        <img src="images/zc.jpg" class="InformationDetails7_f3_f2_img1" v-show="flag1">
        <img src="images/zc-sel.jpg" class="InformationDetails7_f3_f2_img2" v-show="!flag1">
        <p v-html="stroy_supportStatu">我要支持</p>
      </div>
      <div class="stroy_fbox stroy_fbox_enter">
        <img src="images/stroy_footer2.jpg">
        <p>我要参加</p>
      </div>
      <div class="stroy_fbox stroy_fbox_share">
        <img src="images/stroy_footer1.jpg">
        <p>我要分享</p>
      </div>
  </div>
<!--  / footer  -->


<div class="share_show">
	<div class="share_show_bg"></div>	
	<div class="share_show_con">
		<h5>选择要分享到的平台</h5>
		<ul class="clearfix">
			<li>
				<span><img src="images/share_icon1.png"></span>
				微信
			</li>
			<li>
				<span><img src="images/share_icon2.png"></span>
				微信朋友圈
			</li>
			<li>
				<span><img src="images/share_icon3.png"></span>
				QQ
			</li>
			<li>
				<span><img src="images/share_icon4.png"></span>
				QQ空间
			</li>
		</ul>
		
		<a href="##">取消分享</a>
		
	</div>
</div>
<div class="pinglun1_show" v-show="flag2">
    <div class="pinglun1_show_bg"></div>
    <div class="pinglun1_show_con">
        <h5 v-html='stroy_popular'>支持成功</h5>
        <div class="pinglun1_show_con_f1" @click="closeSupport">
            <a href="##">好的，知道了</a>
        </div>
    </div>
</div>

</div>

</body>
<script>
$(window).ready(function(){

  var vm = new Vue({
    el:"#app",
    data(){
      return{
        stroy_details:[],
        stroy_popular:'支持成功',
        flag1:true,
        flag2:false,
        stroy_supportStatu:'我要支持',
      }
    },
    created:function(){
      var $this = this;
      $this.getCate();
      
                            
    },
    mounted:function(){
      
    },
    methods:{
      //老故事详情
      getCate:function(){
        var $this = this;
        const data = {
           oldstory_id:getCookie("oldstoryId"),
        }
        Axios.post(window.Url.stroy_details,data).then((res) => {
          
          if(res.result == 1){
            $this.stroy_details = res.info.cheats;  
            $this.$nextTick(function(){
              $('.stroyinn_box .swiper-storyDetail img').height($(window).width()*380/750);
              mySwiper_detail = new Swiper ('.swiper-storyDetail', {
                  loop: true,
                  pagination: '.swiper-pagination-storyDetail',
                autoplay : 5000,
                autoplayDisableOnInteraction : false
              })
            })                                
          }else
          {
            console.log("老故事详情:"+res.info);
          }
          
        }).catch((err) => {
          console.log("老故事详情:"+err)
        })
      
      },
      zhichi:function(){
        var $this = this;
        const data = {
           oldstory_id:getCookie("oldstoryId"),
           // token:'71213e27892e38b1f7d528d5977f4bd9',
        }
        Axios.post(window.Url.stroy_popularity,data).then((res) => {
          
          if(res.result == 1){
            $this.stroy_popular = res.info;
            $this.flag1  =false; 
            $this.flag2  =true;   
            $this.stroy_supportStatu ="已支持";                  
          }else
          {
            console.log("老故事详情:"+res.info);
          }
          
        }).catch((err) => {
          console.log("老故事详情:"+err);
        })
      
      },

      closeSupport:function(){
        $this=this;
        $this.flag2  =false;
      }
     
    }

  })

  $(window).load(function(){

  })

  $(window).resize(function(){

  })
 var flag=true;
$('.stroy_fbox_share').click(function(){
	$('.share_show').stop(true).fadeIn(600);
})
$('.stroy_fbox_enter').click(function(){
  window.location.href = "stroy_join.html";
})

$('.share_show_bg').click(function(){
	$('.share_show').stop(true).fadeOut(600);
})

$('.share_show_con a').click(function(){
	$('.share_show').stop(true).fadeOut(600);
})


})  
</script>
</html>
